import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'RolesDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {
        let title = this.store.isUpdate ? '修改身份' : '添加身份';
        return (
            <div className={this.store.visible ? 'roles-mask fade-in' : 'roles-mask fade-out'}
                 onClick={() => this.store.closeDialog()}>
                <div className="roles-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="roles-header">
                        <span className="header-title">{title}</span>
                        <span className="header-close" onClick={() => this.store.closeDialog()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                    </div>
                    <div className="roles-content">
                        <div className="roles-input-wrapper">
                            <span className="roles-input-text">名称</span>
                            <ReTextField
                                isLabel={false}
                                type="text"
                                className="roles-input"
                                notfullWidth={false}
                                onChange={(e, v) => this.store.roleNameChange(v)}
                                errorText={''}
                                value={this.store.roleName}
                                placeholder={'身份名称'}/>
                        </div>
                        <div className="roles-input-wrapper">
                            <span className="roles-input-text">标识</span>
                            <ReTextField
                                isLabel={false}
                                type="text"
                                className="roles-input"
                                notfullWidth={false}
                                onChange={(e, v) => this.store.roleSignChange(v)}
                                errorText={''}
                                value={this.store.roleSign}
                                placeholder={'身份标识，如：admin、customer'}/>
                        </div>
                        <div className="roles-input-wrapper">
                            <span className="roles-input-text">备注</span>
                            <ReTextField
                                isLabel={false}
                                type="text"
                                className="roles-input"
                                notfullWidth={false}
                                onChange={(e, v) => this.store.roleRemarksChange(v)}
                                errorText={''}
                                value={this.store.roleRemarks}
                                placeholder={'身份备注'}/>
                        </div>
                        <div className="roles-text">设置可用权限</div>
                        <div className="menu-list-wrapper">
                            {
                                this.store.allMenuList.map(item => {
                                    let active = !!~this.store.menuListForRole.indexOf(item.id);
                                    return (
                                        <div key={item.id} className="menu-item">
                                              <span onClick={() => this.store.selectMenu(item.id)}
                                                    className={active ? 'radio-button active' : 'radio-button'}>
                                                        <ReIcon icon="define" className="icon"/>
                                                    </span>
                                            <span>{item.name}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="button-wrapper">
                            <ReButton label={'确定'} className="button-confirm"
                                      onClick={() => this.store.confirmDialog()}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-rolesdialog-root">
                {this.renderDialog()}
            </div>
        );
    }
}